<template>
            <table class="table table-bordered">
                <tr>
                    <th><span style="color: red;">*</span>店名</th>
                    <th>
                        <input type="text" v-model="Update1.shop_Name">
                    </th>
                </tr>

                <tr>
                    <th><span style="color: red;">*</span>营业时间</th>
                    <th>
                        <input type="date"  v-model="Update1.shop_Ctime"> -  <input type="date"  v-model="Update1.shop_Stime">
                    </th>
                </tr>
                <tr>
                    <th><span style="color: red;">*</span>服务范围</th>
                    <th>
                        <select v-model="Update1.fuWu_Id">
             <option :value="-1">--请选择---</option>
                      <option v-for="item in XiaLa" :value="item.fuwu_Id">{{ item.fuwu_name }}</option>
                   </select>
                    </th>
                </tr>

                <tr>
                    <th>联系电话</th>
                    <th><input type="text" v-model="Update1.shop_Phone"></th>
                </tr>
                <tr>
                    <th><span style="color: red;">*</span>地址</th>
                    <th><input type="text" v-model="Update1.shop_Address"></th>
                </tr>

                    <tr>
                        <th><span style="color: red;">*</span>状态</th>
                        <th>
                            <input type="radio" :value="true" v-model="Update1.shop_State">启用
                            <input type="radio" :value="false" v-model="Update1.shop_State">禁用
                        </th>
                    </tr>
            
                            <tr>
                                <th>loge</th>
                                <th>
                                    <img :src="Update1.shop_Logo" style="width: 60px; height: 60px;">
                                    <input type="file" @change="fileLogo">
                                </th>
                            </tr>

                            <tr>
                                <th>门店照片</th>
                                <th>
                                    <img :src="Update1.shop_Img" style="width: 60px; height: 60px;">
                                    <input type="file" @change="fileMenDian">
                                </th>
                            </tr>

                            <button @click="Update2"> 修改</button>

            </table>




</template>


<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { createRouter, useRoute, useRouter } from 'vue-router';
import { compileStyle } from 'vue/compiler-sfc';

const router=useRouter();
const route=useRoute();


onMounted(()=>{  ///钩子函数
    XiaLa1();FanTian();

})


const XiaLa=ref([{    //下拉的响应式函数
 
 "fuwu_Id": 1,
    "fuwu_name": "小服务"


}])


const XiaLa1=()=>{   //下拉的方法


    axios.get('https://localhost:7151/api/Shop/ShowFuwu').then(res=>{

        XiaLa.value=res.data;

    })
}


const Update1 =ref({  //修改的响应式函数
"shop_Id":route.params.id,
  "shop_Name": "",
  "shop_Img": "",
  "shop_Address": "",
  "shop_Phone": "",
  "shop_Logo": "",
  "fuWu_Id": -1,
  "shop_Ctime": "",
  "shop_Stime": "",
  "shop_State":"" ,
  "shop_IsDel": true

})


const fileLogo =(e:any)=>{  //上传logo图片的方法


var path = e.target.files[0]

var  fs = new FormData();

fs.append("img",path)

axios.post('https://localhost:7151/api/UpFIle/UpfIles',fs).then(res=>{

    Update1.value.shop_Logo=res.data;

})

}


const fileMenDian =(e:any)=>{  //上传logo图片的方法


var path = e.target.files[0]

var  fs = new FormData();

fs.append("img",path)

axios.post('https://localhost:7151/api/UpFIle/UpfIles',fs).then(res=>{

    Update1.value.shop_Img=res.data;

})

}


const Update2=()=>{  //修改方法

    if(Update1.value.shop_Name=="")
{
    alert('姓名不能为空');
    return ;
}


if(Update1.value.shop_Ctime==""||Update1.value.shop_Stime=="")
{
    alert('营业时间不能为空')
    return ;
}

if(Update1.value.fuWu_Id==-1)
{
    alert('请选择服务范围')
    return ;
}

if(Update1.value.shop_Address=="")
{
    alert('地址不能为空');
    return ;
}

if(Update1.value.shop_State=="")
{
    alert('请选择状态');
    return ;
}


    axios.put('https://localhost:7151/api/Shop/Update',Update1.value).then(res=>{

        if(res.data>0)
    {
        alert('修改成功')
        router.push('/ShowShop')
    }
    else
    {
        alert('修改失败')
    }
    })
}



const FanTian=()=>{  //反填方法


    axios.get('https://localhost:7151/api/Shop/FanTianShop',{params:{

        id:route.params.id
    }}).then(res=>{



        Update1.value=res.data;
        
        Update1.value.shop_Ctime=res.data.shop_Ctime.substring(0,10)
        Update1.value.shop_Stime=res.data.shop_Ctime.substring(0,10)
    })
}
</script>